<template>
  <div
    class="camera"
    :style="{
      borderWidth: config.borderWidth,
      borderColor: config.borderColor,

      borderStyle: 'solid'
    }"
    :class="{ round: config.round }"
  >
    <video :class="{ round: config.round }"></video>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useConfigStore } from '@renderer/stores/useConfigStore'

const { config } = useConfigStore()

onMounted(() => {
  const video = document.querySelector('video')!
  const constraints: MediaStreamConstraints = {
    audio: false,
    video: { deviceId: config.deviceId }
  }
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
    video.srcObject = stream
    video.play()
  })
})
</script>

<style lang="less" scoped>
.camera {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  video {
    overflow: hidden;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.round {
  border-radius: 50%;
}
</style>
